<template>
	<view>
		<view class="searchbox">
			<u-search placeholder="请输入搜索关键词" :value="keyword" @change="keywordChange" actionText="取消"
				@custom="cancalKeywordList" @search="search"></u-search>
		</view>

		<view v-if="show === 1" class="history_area">
			<view class="history_container">
				<view class="history_area_title">
					历史记录
				</view>
				<view class="history_area_tag">
					<u-tag v-for="(item, index) in historyKeywordList" :key="index" :text="item" plain size="mini"
						color="#969799" borderColor="#969799" @tap="tagClick(item)"></u-tag>
				</view>
			</view>

			<view class="history_container">
				<view class="history_area_title" style="margin-top: 30rpx;">
					热门搜索
				</view>
				<view class="history_area_tag">
					<block v-for="(item, index) in hotKeywordList">
						<u-tag v-if="item.is_hot === 0" :key="index" :text="item.keyword" plain size="mini"
							color="#969799" borderColor="#969799" @tap="tagClick(item.keyword)"></u-tag>
						<u-tag v-else :key="index" :text="item.keyword" plain size="mini" color="#ff0000"
							borderColor="#ff0000" @tap="tagClick(item.keyword)"></u-tag>
					</block>
				</view>
			</view>
		</view>
		<view v-else-if="show === 2" class="keyword_list_area">
			<u-list>
				<u-list-item v-for="(item, index) in keywordList" :key="index">
					<u-cell :title="item" @click="keywordClick(item)">
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
		<view v-else class="goods_list_area">

			<view v-if="goodsList.length > 0">
				<cd-goods-list :goodsList="goodsList"></cd-goods-list>
			</view>

			<u-empty v-else mode="list" text="暂无商品" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import cdGoodsList from "@/components/cd-goods-list/cd-goods-list.vue"
	import {
		ApisearchHistory,
		ApigetKeywordList,
		ApigetGoodsList
	} from "../../utils/api.js"

	let timer = null;
	export default {
		components: {
			"cd-goods-list": cdGoodsList
		},
		data() {
			return {

				menuList: [{
					title: '综合排序',
					dropdownKey: 'synthesis'
				}, {
					title: '价格',
					dropdownKey: 'price'
				}, {
					title: '销量',
					dropdownKey: 'sales'
				}],
				synthesisValue: '',
				columnOptions: [{
						title: '任务类型',
						key: 'type',
						default: '',
						list: [{
							text: '全部',
							value: ''
						}, {
							text: '类型1',
							value: '2'
						}, {
							text: '类型2',
							value: '1'
						}]
					},
					{
						title: '任务状态',
						key: 'status',
						default: '',
						list: [{
							text: '全部',
							value: ''
						}, {
							text: '已完结',
							value: '1'
						}, {
							text: '工作中',
							value: '2'
						}]
					},
				],
				priceValue: '',
				priceOptions: [{
					label: '筛选条件1',
					value: 1
				}, {
					label: '筛选条件2',
					value: 2
				}, {
					label: '筛选条件3',
					value: 3
				}],
				salesValue: '',
				salesOptions: [{
					label: '筛选条件3',
					value: 1
				}, {
					label: '筛选条件33',
					value: 2
				}, {
					label: '筛选条件333',
					value: 3
				}],


				keyword: '',
				show: 1,
				cancal: false,
				historyKeywordList: [],
				hotKeywordList: [],
				keywordList: [], // 关键词列表
				goodsList: []
			}
		},
		onShow() {
			this.getHistoryData();
		},
		methods: {
			handlerColumnChange(e) {
				if (e.cancel) return;

				this.columnOptions.forEach(item => {
					item.default = e.data[item.key];
				})
			},
			handlerTypeChange(e) {
				console.log(e);
			},



			// 前往搜索
			keywordClick(keyword) {
				this.keyword = keyword;
				this.cancal = true;
				this.show = 3;
				this.searchAction();
			},
			// 关键词标签点击
			tagClick(keyword) {
				this.keyword = keyword
			},
			search() {
				this.show = 3;
				this.searchAction();
			},

			// 调用API搜索
			async searchAction() {
				let res = await ApigetGoodsList(this.keyword);
				if (res.errno !== 0) return;

				this.goodsList = res.data.goodsList;
			},

			cancalKeywordList() {
				this.show = 1;
				this.cancal = true;
				this.keyword = "";
				// uni.switchTab({
				// 	url: "/pages/index/index"
				// })
			},
			// 关键词input
			async keywordChange(e) {
				if (this.cancal) {
					this.cancal = false;
					return;
				}

				// 取消上次延迟回调函数
				clearTimeout(timer)
				// 发起一个新的延迟回调函数
				timer = setTimeout(async () => {
					this.keyword = e.trim();
					let res = await ApigetKeywordList(this.keyword);
					if (res.errno !== 0) return;
					this.keywordList = res.data;
					this.show = 2;
				}, 500)
			},
			async getHistoryData() {
				let res = await ApisearchHistory();
				// console.log(res);
				if (res.errno !== 0) return;

				let {
					defaultKeyword,
					historyKeywordList,
					hotKeywordList
				} = res.data;
				// 关键词
				// this.keyword = defaultKeyword.keyword;

				// 历史关键词
				this.historyKeywordList = historyKeywordList;

				// 热门搜索
				this.hotKeywordList = hotKeywordList;

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #efefef;
	}

	.searchbox {
		background-color: white;
		padding: 10rpx 30rpx;
	}

	.history_area {
		.history_container {
			background-color: white;
			padding: 0rpx 30rpx;
			margin: 15rpx 0px;

			.history_area_title {
				font-size: 28rpx;
				margin-bottom: 15rpx;
				font-weight: bold;
			}

			.history_area_tag {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.u-transition {
					margin-right: 10rpx !important;
					margin-bottom: 10rpx !important;
				}
			}
		}
	}

	.u-list-item {
		background-color: white;
	}

	.goods_list_area {
		background-color: white;
	}
</style>
